<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05-使用composition API开发todolist</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>

    <script>
      //list有关操作内容封装
      const listRelativeEffect = () => {
        const { reactive } = Vue;
        const list = reactive([]);
        const addItemToList = (item) => {
          list.push(item);
        };

        return { list, addItemToList };
      };

      //  inputValue相关操作内容封装
      const inputRelativeEffect = () => {
        const { ref } = Vue;
        const inputValue = ref("123");
        const handleInputValue = (e) => {
          inputValue.value = e.target.value;
        };

        return { inputValue, handleInputValue };
      };

      const app = Vue.createApp({
        setup() {
          //流程调度中转
          const { list, addItemToList } = listRelativeEffect();

          const { inputValue, handleInputValue } = inputRelativeEffect();

          return { list, addItemToList, inputValue, handleInputValue };
        },

        template: `
                    <div>
                        <input type="text" :value="inputValue" @input="handleInputValue">  
                      
                        <button @click="() => {  addItemToList(inputValue) }">提交</button>
                    </div>

                    <ul>
                       <li v-for="(item, index) in list" :key="index">{{item}}</li>
                    </ul>
                `,
      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
